<template>
    <div >
      <a-drawer
      width="1100"
      :maskClosable="false"
      :visible="dialogData.show"
      direction="rtl"
      @close="handleClose">
        <div slot="title">
          <span>{{dialogData.title}}</span>
        </div>
        <el-row style="width:920px;padding-bottom:150px;height:100%;overflow-y:auto">
          <el-col :span="19">
             <el-form :model="parames" size="small" :rules="rules" label-position="left" ref="parames" label-width="120px" class="addForm">
                <el-row style="padding: 0 40px" :gutter="30">
                  <a-collapse :defaultActiveKey="activeNames" :bordered="false">
                    <a-collapse-panel class="marginB10" header="基本信息" key="1">
                      <el-col :span="12" style="margin-top:15px" >
                        <el-form-item label="发票类型:" prop="invoiceType">
                          <el-select style="width:100%" v-model="parames.invoiceType" placeholder="请选择">
                            <el-option v-for="(item,index) in invoiceType" :key="index" :label="item.desc" :value="item.name"></el-option>
                          </el-select>
                        </el-form-item>
                      </el-col>
                      <el-col :span="12" style="margin-top:15px">
                        <el-form-item label="服务公司:" prop="serviceCompany">
                          <el-select style="width:100%" v-model="parames.serviceCompany" placeholder="请选择">
                            <el-option v-for="(item,index) in companyData" :key="index" :label="item.providerName" :value="item.id"></el-option>
                          </el-select>
                        </el-form-item>
                      </el-col>
                      <el-col :span="12" >
                        <el-form-item label="发票抬头:" prop="invoiceTitle">
                          <el-input size="small" v-model="parames.invoiceTitle" placeholder="请输入"></el-input>
                        </el-form-item>
                      </el-col>
                      <el-col :span="12" >
                        <el-form-item label="社会信用代码:" prop="creditCode">
                          <el-input size="small" v-model="parames.creditCode" placeholder="请输入"></el-input>
                        </el-form-item>
                      </el-col>
                      <el-col :span="24" >
                        <el-form-item label="地址/电话:">
                          <el-input size="small" v-model="parames.addressAndTelephone" placeholder="请输入"></el-input>
                        </el-form-item>
                      </el-col>
                      <el-col :span="24" >
                        <el-form-item label="开户行及账号:">
                          <el-input size="small" v-model="parames.depositBankAndAccount" placeholder="请输入"></el-input>
                        </el-form-item>
                      </el-col>
                      <el-col :span="24">
                        <el-form-item label="备注信息:">
                          <el-input size="small" type="textarea" v-model="parames.remark" placeholder="请输入"></el-input>
                        </el-form-item>
                      </el-col>
                    </a-collapse-panel>
                    <a-collapse-panel class="marginB10" header="开票明细" key="2">
                      <el-col :span="24" style="margin-top:15px">
                        <el-table
                          :data="parames.invoicingDetailList"
                          style="width: 100%">
                          <!-- <el-table-column
                            prop="productName"
                            label="客户名称"
                            width="180">
                          </el-table-column> -->
                          <el-table-column
                            prop="contractId"
                            label="合同流水号"
                            show-overflow-tooltip
                            min-width="100">
                          </el-table-column>
                          <el-table-column
                            prop="allowInvoiceAmount"
                            label="可开票金额"
                            width="100">
                          </el-table-column>
                          <!-- <el-table-column
                            prop="productName"
                            label="申请中金额"
                            width="180">
                          </el-table-column> -->
                          <el-table-column
                            width="120"
                            prop="invoiceContent"
                            label="开票内容">
                            <template slot-scope="scope">
                              <el-form-item
                                style="margin-bottom: 0"
                                :prop="'invoicingDetailList.' + scope.$index + '.invoiceContent'"
                                label-width="0"
                                :rules="[
                                  { required: true, message: '不能为空', trigger: ['blur', 'change'] },
                                ]"
                              >
                                <el-input v-model="scope.row.invoiceContent" size="small"></el-input>
                              </el-form-item>
                            </template>
                          </el-table-column>
                          <el-table-column
                            width="140"
                            prop="applicationAmount"
                            label="本次开票额(元)">
                            <template slot-scope="scope">
                              <el-form-item
                                style="margin-bottom: 0"
                                :prop="'invoicingDetailList.' + scope.$index + '.applicationAmount'"
                                label-width="0"
                                :rules="[
                                  { required: true, message: '不能为空', trigger: ['blur', 'change'] },
                                  { type: 'number', message: '请输入正整数', trigger: ['blur', 'change'] }
                                ]"
                              >
                                <!-- <el-input v-model.number="scope.row.applicationAmount" size="small"></el-input> -->
                                <el-input v-model.number="scope.row.applicationAmount"  placeholder="请输入" size="small"></el-input>
                                <p style="color:#f00" v-if="scope.row.applicationAmount>scope.row.allowInvoiceAmount">超过最大额</p>
                              </el-form-item>
                            </template>
                          </el-table-column>
                          <el-table-column
                            prop="address"
                            width="80"
                            label="操作">
                            <template slot-scope="scope">
                              <el-button size="mini" type="text" icon="el-icon-delete" @click.native="handleDelproduct(scope.$index,scope.row)"></el-button>
                            </template>
                          </el-table-column>
                        </el-table>
                        <el-button icon="el-icon-plus" size="small" @click="handelAddProduct" style="width:100%;margin-top:20px">添加合同</el-button>
                      </el-col>
                    </a-collapse-panel>
                  </a-collapse>
                </el-row>
              </el-form>
            </el-col>
            <el-col :span="5" style="position: fixed;top:80px;right:-10px;width:240px">
              <div v-if="dialogData.type == 'edit'">
                <el-button
                  @click="handleCancle"
                  size="small"
                  icon="el-icon-close"
                  style="width:200px;text-align: left;margin-bottom:10px"
                >取消编辑</el-button>
              </div>
            </el-col>
        </el-row>
        
        <div class="from-bottom-box">
          <el-button size="small" type="primary" :loading="loadingBtn" @click="handleSave">保存</el-button>
          <el-button size="small" @click="handleClose">取消</el-button>
        </div>
      </a-drawer>
      <hetongDialog :hetongData="hetongData" @watchSlect="watchSlect"></hetongDialog>
    </div>
</template>

<script>
import hetongDialog from './addKaipiaoHetong'
export default {
    props: ['dialogData'],
    data() {
        return {
          customStyle: 'border-radius: 4px;margin-bottom: 8px;border: #f7f7f7 solid 1px;overflow: hidden',
          activeNames: ['1','2'],
          loadingBtn: false,
          parames: {
            id: '',
            invoiceType: '', //发票类型
            serviceCompany: '', //服务公司
            invoiceTitle: '', //发票抬头
            creditCode: '',//社会信用代码
            addressAndTelephone: '',//地址，电话
            depositBankAndAccount: '',//开户行及账号
            remark: '', //备注信息
            invoicingDetail: {
              id: '',
              contractId: '',
              allowInvoiceAmount: '',
              invoiceContent: '',
              applicationAmount: ''
            },
            invoicingDetailList: []
          },
          tableKeys: [0,1,2,3],
          hetongData: {
            title: '',
            slectData: [],
            show: false
          },
          rules: {
            invoiceType: [{ required: true, message: '必填', trigger: ['change','blur' ]}],
            serviceCompany: [{ required: true, message: '必填', trigger: ['blur','change' ]}],
            invoiceTitle: [{ required: true, message: '必填', trigger: ['blur' ]}],
            creditCode: [{ required: true, message: '必填', trigger: ['blur' ]}]
          },
          companyData: [], //公司信息
          invoiceType: [], //发票类型
        };
    },
    created() {

    },
    mounted() {

    },
    methods: {
      handleClose () { //关闭弹窗
        this.dialogData.show = false
      },
      handleCancle () { //取消重新编辑
        this.dialogData.show = false
        this.$emit('checkOpen')
      },
      handleBlur (item) { //输入价格失去焦点
       var re = /^[0-9]+.?[0-9]*$/; //判断字符串是否为数字 //判断正整数 /^[1-9]+[0-9]*]*$/
    　　if (!re.test(item.price2)) {
    　　　　item.price2 = ''
    　　　　return false;
    　　}
      },
      watchSlect (data) { //监听返回的选中的数组
        if (data) {
          this.parames.invoicingDetailList = []
          this.parames.invoicingDetail.id =  ''
          this.parames.invoicingDetail.contractId =  data.id
          this.parames.invoicingDetail.allowInvoiceAmount = data.allowInvoiceAmount
          this.parames.invoicingDetail.invoiceContent = ''
          this.parames.invoicingDetail.applicationAmount = ''
          this.parames.invoicingDetailList.push(this.parames.invoicingDetail)
        }
      },
      handleDelproduct (index,row) { //删除当前行产品
        this.parames.invoicingDetailList.splice(index,1)
        this.parames.invoicingDetail.id = ''
        this.parames.invoicingDetail.contractId = ''
        this.parames.invoicingDetail.allowInvoiceAmount = ''
        this.parames.invoicingDetail.invoiceContent = ''
        this.parames.invoicingDetail.applicationAmount = ''
      },
      handelAddProduct () { //添加合同
        this.hetongData.title = '选择合同'
        this.hetongData.slectData = this.parames.invoicingDetail
        this.hetongData.show = true
      },
      setData () {
    
      },
      handleSave () { //保存商机
        this.$refs['parames'].validate((valid) => {
          if (!this.parames.invoicingDetail.contractId) {
            this.$message.error('请选择合同');
            return false
          }
          if (this.parames.invoicingDetail.applicationAmount>this.parames.invoicingDetail.allowInvoiceAmount) {
            return false
          }
          this.setData()
          if (valid) {
            this.loadingBtn = true
            if (this.dialogData.type == 'edit') { //修改保存成功
              this.$post(this.$api.postFinanceInvoicingEdit,this.parames).then(response => {
                if (response.data.succeed) {
                  this.$message({ type:'success',message: '修改成功'})
                  this.handleClose()
                  this.$emit('checkOpen','1') //重新打开父级弹窗
                }
              })
            } else { //新增
              this.$post(this.$api.postFinanceInvoicingAdd,this.parames).then(response => {
                if (response.data.succeed) {
                  this.$message({ type:'success',message: '保存成功'})
                  this.$emit('checkRender')
                  this.handleClose()
                }
              })
            }
            setTimeout(() => {
              this.loadingBtn = false
            }, 300);
          }
        })
      },
      render () { //获取详情信息
        this.loading = true
        this.$post(this.$api.postFinanceInvoicingFind,{
          invoicingRecordId: this.dialogData.id
        }).then(response => {
          if (response.data.succeed) {
            let data = response.data.data
            this.parames.id = data.id
            this.parames.invoiceType = data.invoiceType.name //发票类型
            this.parames.serviceCompany = data.serviceCompany //服务公司
            this.parames.invoiceTitle = data.invoiceTitle //发票抬头
            this.parames.creditCode = data.creditCode//社会信用代码
            this.parames.addressAndTelephone = data.addressAndTelephone//地址，电话
            this.parames.depositBankAndAccount = data.depositBankAndAccount//开户行及账号
            this.parames.remark = data.remark //备注信息
            data.invoicingDetail.contractId = data.contractId
            this.parames.invoicingDetailList.push(data.invoicingDetail)
            this.parames.invoicingDetail = data.invoicingDetail
            setTimeout(() => {
              this.loading = false
            }, 200);
          }
        })
      },
      postProviderList () { //获取所有服务商
        this.$post(this.$api.postProviderList).then(response => {
          if (response.data.succeed) {
            this.companyData = response.data.data
          }
        })
      },
      resetData () { //重置数据
        this.parames.id = ''
        this.parames.invoiceType = '' //发票类型
        this.parames.serviceCompany = '' //服务公司
        this.parames.invoiceTitle = '' //发票抬头
        this.parames.creditCode = ''//社会信用代码
        this.parames.addressAndTelephone = ''//地址，电话
        this.parames.depositBankAndAccount = ''//开户行及账号
        this.parames.remark = '' //备注信息
        this.$refs.parames.resetFields()
        this.parames.invoicingDetailList = []
      }
    },
    components: {
      hetongDialog
    },
    computed: {
      changeDialog () {
        return this.dialogData.show
      }
    }, 
    watch: {
      changeDialog: {
        handler (curVal, oldVal) {
          if (curVal) {
            this.$utils.getEnumberation('postFinanceInvoicingInvoiceType','invoiceType',this) //发票类型
            this.postProviderList()
            if (this.dialogData.type == 'edit') {
              this.render()
            }
          } else {
            this.resetData()
          }
        }
      }
    },
};
</script>

<style>
#addHet .ant-collapse > .ant-collapse-item > .ant-collapse-header .ant-collapse-arrow{
  left: 15px;
}
#addHet .ant-collapse > .ant-collapse-item > .ant-collapse-header{
  background: #fafafa;
}
#addHet .ant-collapse > .ant-collapse-item{
  border-bottom: #f7f7f7 solid 1px!important;
}
</style>
